<template>
    <el-drawer :title="$t('game.setting.game.drawer.details')" size="400px" :visible.sync="drawerVisible" @close="$emit('update:visible', false)">
        <vue-simplebar>
            <div class="pt-12 pb-12 pr-3" v-if="data.id">
                <el-form label-width="auto" class="detail">
                    <el-form-item :label="$t('game.setting.game.name')">
                        <component-page-games :game-code="data.code" :game-name="data.name"></component-page-games>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.game.code')">{{ data.code }}</el-form-item>
                    <el-form-item :label="$t('game.setting.game.type')">{{ data.type }}</el-form-item>
                    <el-form-item :label="$t('game.setting.game.category')">
                        <el-tag effect="plain" size="mini" type="info" class="mr-1" v-for="(item,index) in data.category" :key="index">
                            {{ $t('game.setting.game.categories')[item].label || item }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.game.grade')">
                        <el-tag effect="plain" size="mini" type="info">
                            {{ $t('game.setting.game.grades')[data.grade].label || data.grade }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.game.index')">{{ data.index }}</el-form-item>
                    <el-form-item :label="$t('game.setting.game.base_user_num')">{{ data.base_user_num }}</el-form-item>
                    <el-form-item :label="$t('game.setting.game.private')">{{ data.private_name }}</el-form-item>
                    <el-form-item :label="$t('game.setting.game.created')">
                        <component-page-timestamp :timestamp="data.created"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.game.updated')">
                        <component-page-timestamp :timestamp="data.updated"></component-page-timestamp>
                    </el-form-item>
                    <el-form-item :label="$t('game.setting.game.deleted')">
                        <el-tag effect="plain" size="mini" :type="!data.deleted ? 'info' : 'danger'">
                            {{ $t('form.deletedList')[Number(!!data.deleted)].label }}
                        </el-tag>
                    </el-form-item>
                </el-form>
            </div>
        </vue-simplebar>
    </el-drawer>
</template>

<script>
export default {
    name: "ItemDetails",
    props: ['visible', 'data'],
    data() {
        return {
            drawerVisible: false,
        }
    },
    watch: {
        visible: function (n, o) {
            if (n) {
                // 显示抽屉
                this.drawerVisible = n;
            }
        }
    },
}
</script>

<style scoped>

</style>
